const React = require('react');
import {browserHistory} from 'react-router';
const $=require('jquery');

var page = React.createClass({
    getInitialState:function(){
        return{
            bookid:0,
            chapterid:0,
            loading:false,
            chapterList:[]
        }
    },
    componentDidMount :function(){  
        this.getData();

        let winHigh = $(window).height();
         $(window).scroll(function () {
            let scrollVal = $(window).scrollTop();
            let docHigh = $(document).height();
            // console.log(scrollVal,docHigh-winHigh)
            //如果滚动条到底
            if (scrollVal == docHigh - winHigh) {
                this.getData();
            }
        }.bind(this))
    },
    componentWillMount :function(){  
        window.scrollTo(0,0); 
        let bookid=this.props.params.bookid;
        let chapterid=this.props.params.chapterid;
        this.setState({
            bookid:bookid,
            chapterid:chapterid
        })               
    },
    componentWillUnmount:function(){        
        $(window).unbind('scroll');        
    },
    getData:function(){
        let loading=this.state.loading;
        if(loading)
            return;
        this.setState({
            loading:true
        })
        let postData={
            bid:this.state.bookid,
            cid:this.state.chapterid
        };
        let chapterList=this.state.chapterList;
        $.ajax({
            type: "POST",
            url: "http://localhost:3125/ApiBook/GetChapter",
            dataType: "json",
            data: postData,
            success: function (result) {                
                let nextid=result.nextid;
                let newChapter={
                    ChapterName:result.chapter.ChapterName,
                    ChapterContent:result.chapter.ChapterContent
                };
                chapterList.push(newChapter);
                this.setState({
                    chapterid:nextid,
                    loading:false,
                    chapterList:chapterList
                });
            }.bind(this)
        });
    },
    render: function () {
        let content=this.state.chapterList.map(function(item,index){
            return (
                <article key={'art'+index} className="chapter">
                    <h1 className="am-text-center chapterTitle">
                        {item.ChapterName}
                    </h1>
                    <div className="am-cf">
                        <div dangerouslySetInnerHTML={{__html:item.ChapterContent}}></div>
                    </div>
                </article>
            )
        });
        return (       
            <div>
                <div id="chapterBox">
                    {content}                    
                </div>
                <div id="loading" style={this.state.loading?{display:"block"}:{display:"none"}} className="am-text-center">
                    <i className="am-icon-spinner am-icon-spin"></i>
                    <p className="am-text-sm am-margin-top-0">努力加载中...</p>
                </div>
            </div>
        );
      }
});

module.exports = page;


